<template>
  <div class="mod-sys__menu">
    <div class="mod-sys__menu__left">
      <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
        <el-form-item>
          <el-button @click="state.getDataList()">{{ $t("query") }}</el-button>
        </el-form-item>
        <!--        <el-form-item>-->
        <!--          <el-button v-if="state.hasPermission('clc:clcdataset:save')" type="primary" @click="addOrUpdateHandle()">-->
        <!--            {{ $t("add") }}-->
        <!--          </el-button>-->
        <!--        </el-form-item>-->
      </el-form>
      <el-table v-loading="state.dataListLoading" :data="state.dataList" row-key="id" border style="width: 100%">
        <el-table-column prop="name" label="名称" header-align="center" min-width="150">
          <template v-slot="scope">
            <el-button type="success" text @click="getDateSetColumn(scope.row)">
              {{ scope.row.name }}
            </el-button>
          </template>
        </el-table-column>
        <!--        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="170">-->
        <!--          <template v-slot="scope">-->
        <!--            <el-button v-if="state.hasPermission('clc:clcdataset:save')" type="primary" link-->
        <!--                       @click="addHandle(scope.row)">{{ $t("add") }}-->
        <!--            </el-button>-->
        <!--            <el-button v-if="state.hasPermission('clc:clcdataset:update')" type="primary" link-->
        <!--                       @click="addOrUpdateHandle(scope.row.id)">{{ $t("update") }}-->
        <!--            </el-button>-->
        <!--            <el-button v-if="state.hasPermission('clc:clcdataset:delete')" type="primary" link-->
        <!--                       @click="state.deleteHandle(scope.row.id)">{{ $t("delete") }}-->
        <!--            </el-button>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>
      <!-- 弹窗, 新增 / 修改 -->
      <!--      <add-or-update ref="addOrUpdateRef" @refreshDataList="state.getDataList"></add-or-update>-->
    </div>
    <div class="mod-sys__menu__right" v-if="stateSet.dataForm.setid">
      <el-form :inline="true" :model="stateColumn.dataForm" @keyup.enter="stateColumn.getDataList()">
        <el-form-item>
          <el-button @click="getDataList()">{{ $t("query") }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="float: right;" @click="submitHandle()">提交</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="stateColumn.dataListLoading" :data="stateColumn.dataList" border
                @selection-change="stateColumn.dataListSelectionChangeHandle" style="width: 100%">
        <el-table-column label="选择" header-align="center" align="center" width="50">
          <template v-slot:default="scope">
            <el-checkbox @change="checkboxChange($event,scope.row.id)" :true-label="1"
                         :checked="selectColumnIds.includes(scope.row.id)"
                         :key="scope.$index+scope.id"
                         :false-label="0"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="中文名称" header-align="center" align="center"></el-table-column>
        <el-table-column prop="chInitials" label="中文首拼" header-align="center" align="center"></el-table-column>
        <el-table-column prop="inId" label="内部标识符" header-align="center" align="center"></el-table-column>
        <el-table-column prop="dataType" label="数据分类" header-align="center" align="center">
          <template v-slot="scope">
            {{ stateColumn.getDictLabel("data_type", scope.row.dataType) }}
          </template>
        </el-table-column>
        <el-table-column prop="dataLevel" label="数据等级" header-align="center" align="center">
          <template v-slot="scope">
            {{ stateColumn.getDictLabel("data_level", scope.row.dataLevel) }}
          </template>
        </el-table-column>
        <el-table-column prop="dataShare" label="数据共享" header-align="center" align="center">
          <template v-slot="scope">
            {{ stateColumn.getDictLabel("data_share", scope.row.dataShare) }}
          </template>
        </el-table-column>
        <el-table-column prop="dataOpen" label="数据开放" header-align="center" align="center">
          <template v-slot="scope">
            {{ stateColumn.getDictLabel("data_open", scope.row.dataOpen) }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align: center; flex: 1" v-else>
      <el-empty description="请先选择一个数据集"></el-empty>
    </div>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import {onMounted, reactive, ref, toRefs, watch} from "vue";
// import AddOrUpdate from "./clcdataset-add-or-update.vue";
import Template from "@/views/devtools/template.vue";
import baseService from "@/service/baseService";

// 数据集
const view = reactive({
  getDataListURL: "/clc/clcdataset/listtree",
});
const state = reactive({...useView(view), ...toRefs(view)});
// 所有字段
const viewColumn = reactive({
  getDataListURL: "/clc/clcdatacolumn/listall",
  dataForm: {}
});
const stateColumn = reactive({...useView(viewColumn), ...toRefs(viewColumn)});
// 数据集设置的字段
const viewSet = reactive({
  getDataListURL: "/clc/clcdatasetcolumn/listbyset",
  dataForm: {}
})
const stateSet = reactive({...useView(viewSet), ...toRefs(viewSet)});

const selectColumnIds = ref([])

const checkboxChange = (v: any, columnId: any) => {
  if (v === 1) {
    selectColumnIds.value.push(columnId)
  } else {
    selectColumnIds.value = selectColumnIds.value.filter(obj => obj !== columnId)
  }
  debugger
}
const getDateSetColumn = (row: any) => {
  if (row.children && row.children.length > 0)
    return;
  stateSet.dataForm.setid = row.id
  getDataList()
}
const getDataList=()=>{
  selectColumnIds.value = []
  stateSet.dataList=[]
  baseService.get("/clc/clcdatasetcolumn/listbyset", stateSet.dataForm).then(res => {
    stateSet.dataList = res.data;
    if(res.data!=null && res.data.length>0){
      for (let i = 0; i < res.data.length; i++) {
        selectColumnIds.value.push(res.data[i].columnId)
      }
    }
    debugger
  })
}

const submitHandle = () => {
  const subDataList = [];
  debugger

  for (let i = 0; i < selectColumnIds.value.length; i++) {
    subDataList.push({columnId: selectColumnIds.value[i], dataSetId: stateSet.dataForm.setid});
  }
  baseService.post("/clc/clcdatasetcolumn/savebatch", subDataList).then(res => {
  })
}
</script>
<style lang="scss" scoped>
.mod-sys__menu {
  display: flex;

  .mod-sys__menu__left {
    width: 25%;
    overflow: auto;

    .el-form-item {
      margin-right: 20px;
    }
  }

  .mod-sys__menu__right {
    width: 75%;
    overflow: auto;

    .el-form-item {
      margin-right: 20px;
    }
  }

  .flex-between {
    display: flex;
    justify-content: space-between;
  }
}
</style>
